import React, { useState, useEffect } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'umi'
import { withI18n } from '@lingui/react'
import { SaveOutlined } from '@ant-design/icons'
import { Card, Form, Input, Button, Switch, message, InputNumber } from 'antd'
import { tailLayout, formItemLayout } from '@/utils/helper'
import styles from './index.less'
import '@/utils/index.less'
import { get, put } from '@/services/https'
import { numPattern } from '@/utils/regExp'
import { Unite } from '@/utils/Unite'
const { TextArea } = Input
const { Search } = Input
@withI18n()
@connect(({ post, loading }) => ({ post, loading }))
class Standard extends React.Component {
  formRef = React.createRef()
  state = {
    keys: [],
    setIsModalVisible: false, //弹框
    initialValues: {},
    OPTIONS: [],
    selectedItems: '商业病毒引擎',
    accessibility: 0,
    engine_list: [],
    is_commercial_virus_E: 0,
    is_commercial_virus_J: 0,
    is_commercial_virus_Y: 0,
    Keywords: [],
    key_names: ['', '', ''],
  }
  componentDidMount() {
    this.setState({ accessibility: sessionStorage.getItem('accessibility') })
    if (Unite(2)) {
      this.getData()
    }
  }

  constructor(props) {
    super(props)
  }
  handleChange = (selectedItems) => {
    this.setState({ selectedItems })
  }
  getData = (id) => {
    get('config?sectionPath=SAFE_POLICY,VIRUS').then((res) => {
      let initialValues = res
      initialValues.size_enable = Boolean(initialValues.size_enable)
      this.setState({
        is_commercial_virus_E: res.is_commercial_virus_E,
        is_commercial_virus_J: res.is_commercial_virus_J,
        is_commercial_virus_Y: res.is_commercial_virus_Y,
        key_names: res.key_names,
      })
      this.formRef.current.setFieldsValue(initialValues)
    })
  }
  handleSaveBtn = (values) => {
    const { location, i18n } = this.props
    values.size_enable = Number(values.size_enable)
    values.is_commercial_virus_E = this.state.is_commercial_virus_E
    values.is_commercial_virus_J = this.state.is_commercial_virus_J
    values.is_commercial_virus_Y = this.state.is_commercial_virus_Y
    put('config?sectionPath=SAFE_POLICY,VIRUS', values).then((res) => {
      if (res.succ) {
        message.success(i18n.t`Modify`)
      } else {
        message.error(res.error)
      }
    })
  }
  clFna = () => {
    this.props.history.push('/strategy/IPgroup')
  }

  render() {
    const { location, i18n } = this.props
    const {
      initialValues,
      is_commercial_virus_E,
      is_commercial_virus_J,
      is_commercial_virus_Y,
      key_names,
    } = this.state
    const formProps = {
      name: 'basic',
      onFinish: this.handleSaveBtn,
      initialValues,
      ref: this.formRef,
    }
    return (
      <div>
        <Form {...formItemLayout} {...formProps}>
          <Card title={i18n.t`virusmail-Basic`} className={styles.Po_bt}>
            {/* {nameValue} */}
            <div style={{ position: 'relative' }}>
              <Form.Item
                label={i18n.t`virusmail-engine`}
                name=""
                extra={i18n.t`Gree`}
              >
                <div style={{ marginTop: '6px' }}>
                  <div className={styles.Xd}>
                    {is_commercial_virus_Y == 0 ? (
                      <span className={styles.Xd_red}></span>
                    ) : (
                      <span className={styles.Xd_green}></span>
                    )}
                    <span>{key_names[0]}</span>
                  </div>
                  <div className={styles.Xd}>
                    {is_commercial_virus_E == 0 ? (
                      <span className={styles.Xd_red}></span>
                    ) : (
                      <span className={styles.Xd_green}></span>
                    )}
                    <span>{key_names[1]}</span>
                  </div>
                  <div className={styles.Xd}>
                    {is_commercial_virus_J == 0 ? (
                      <span className={styles.Xd_red}></span>
                    ) : (
                      <span className={styles.Xd_green}></span>
                    )}
                    <span>{key_names[2]}</span>
                  </div>
                </div>
              </Form.Item>
            </div>
            <Form.Item
              label={i18n.t`virusmail-limit`}
              name="size_enable"
              valuePropName="checked"
            >
              <Switch
                checkedChildren={i18n.t`Off`}
                unCheckedChildren={i18n.t`on`}
                defaultChecked
              />
            </Form.Item>
            <Form.Item
              label={i18n.t`virusmail-detect`}
              name="size_max"
              rules={[{ pattern: numPattern, message: '请输入正整数' }]}
            >
              <InputNumber min={1} max={65535} />
            </Form.Item>
          </Card>
          <Form.Item {...tailLayout}>
            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
              {this.state.accessibility == 0 ? (
                <Button
                  type="primary"
                  className={styles.Po_Le}
                  htmlType="submit"
                  icon={<SaveOutlined />}
                >
                  {i18n.t`Baocun`}
                </Button>
              ) : (
                ''
              )}
            </div>
          </Form.Item>
        </Form>
      </div>
    )
  }
}
Standard.propTypes = {
  post: PropTypes.object,
  loading: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
}
export default Standard
